<template>
	<div class="container">
		<JxNavbar :title='title' />
		<div class="content">
			<JxRichText :html='protocol' />
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { useGeneralStore } from '@/store/general.js'
	import JxNavbar from '@/components/navbar/index.vue'
	import JxRichText from '@/components/JxRichText/index.vue'

	const generalStore = useGeneralStore();

	const title = ref('');
	const type = ref('user');

	const protocol = computed(() => {
		switch (type.value) {
			case 'user':
				return generalStore.systemData.user_protocol;
			case 'privacy':
				return generalStore.systemData.privacy_protocol;
			default:
				return ''
		}
	});

	onLoad((option) => {
		type.value = option['type'];
		title.value = type.value === 'user' ? '用户协议' : type.value === 'privacy' ? '隐私政策' : '协议'
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: $side-width;
	}
</style>